<template>
  <div class="account-create-wrap">
    <createTop firstMenu="系统设置" secondMenu="账户列表" :title="pageName"></createTop>
    <el-card shadow="always" v-loading="loading">
      <div class="content">
        <div class="content-title">账号 <span class="red-icon">※</span></div>
          <el-input :style="{'width':'350px'}" v-model="username" placeholder="请输入账号"></el-input>
        <div class="content-title">密码 <span class="red-icon">※</span></div>
          <el-input :style="{'width':'350px'}" align="left" v-model="pwd" :placeholder="isEdit?'留空为原密码':'请输入密码'"></el-input>
        <div class="content-title">角色 <span class="red-icon">※</span> </div>
          <el-select class="short-input" v-model="role" placeholder="请选择">
            <el-option v-for="item in roles" :key="item.id" :label="item.role" :value="item.id"></el-option>
          </el-select>
        <div class="content-title">备注 </div>
          <el-input :style="{'width':'350px'}" v-model="remark" type="textarea" :rows="5" resize="none" placeholder="输入适当的备注方便管理"></el-input>
      </div>
      <saveBtn @confirm="confirm"></saveBtn>
    </el-card>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import createTop from '@/components/createTop.vue';
import saveBtn from '@/components/saveBtn.vue';
import ajaxResquest from '@/api/apiRequest';

@Component({
  components: {
    createTop,
    saveBtn
  }
})
export default class AccountCreate extends Vue {
  pageName: string = '';
  secondMenu: string = '';
  rolesRes!: ajaxResquest;
  createRes!: ajaxResquest;
  infoRes!: ajaxResquest;
  roles: any[] = [];
  role: string = '';
  username: string = '';
  pwd: string = '';
  remark: string = '';
  loading: boolean = false;
  arriveName: string = 'accountList';
  info!: object;
  id!: string;
  isEdit: boolean = false;
  mounted() {
    console.log(this.$route.query);
    if (this.$route.query.edit) {
      this.isEdit = true;
      this.pageName = '编辑账户';
      this.infoRes = new ajaxResquest('/system/account/getinfo');
      this.id = this.$route.query.id;
      this.getInfo();
    } else {
      this.pageName = '新增账户';
    }
    this.rolesRes = new ajaxResquest('/system/role/index');
    this.createRes = new ajaxResquest('/system/account/addtodo');
    this.rolesRes.getFunction().then((res: any) => {
      this.roles = res.data.data.types.data;
    });
  }
  getInfo() {
    this.infoRes.getFunction({ user_id: this.id }).then((res: any) => {
      console.log(res);
      if (res.data.code === 1) {
        this.username = res.data.data.types.info.username;
        this.role = res.data.data.types.info.role_id;
        this.remark = res.data.data.types.info.remark;
      }
    });
  }
  confirm(): void {
    let data: any = {
      username: this.username,
      pwd: this.pwd,
      role_id: this.role,
      remark: this.remark
    };
    if (!this.$route.query.edit) {
      if (
        this.role == '' ||
        this.username == '' ||
        this.pwd == ''
      ) {
        this.$message.error('参数不能为空');
        return;
      }
    } else {
      data = { ...data, user_id: this.id };
    }
    this.createRes.getFunction(data).then((res: any) => {
      this.$to('accountList');
    });
  }
}
</script>
<style lang="less">
.account-create-wrap {
  height: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  z-index: 101;
  box-sizing: border-box;
  .el-card {
    overflow-y: auto;
  }
  .content {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    background-color: #fff;
    border-radius: 4px;
    .content-title {
      height: 40px;
      margin-top: 20px;
      line-height: 2;
      text-align: left;
    }
    .short-input {
      width: 100%;
      width: 240px;
      margin-right: 10px;
    }
    .el-upload-list__item {
      width: 350px;
    }
    .el-textarea {
      margin-bottom: 30px;
    }
  }
}
</style>
